<template>
  <div class="tab-menu-container">
    <!-- 吸顶的标签栏 -->
    <van-sticky>
      <van-tabs v-model:active="active" class="tab-header">
        <van-tab title="关注"></van-tab>
        <van-tab title="推荐"></van-tab>
        <van-tab title="笔记"></van-tab>
        <van-tab title="减重食谱"></van-tab>
        <van-tab title="鲜这样吃"></van-tab>
        <van-tab title="活动"></van-tab>
        <van-tab title="课堂"></van-tab>
      </van-tabs>
    </van-sticky>

    <!-- 内容区域 -->

    <div class="tab-content" ref="tabContent">
      <keep-alive>
        <component :is="getComponentByIndex(active)" :active-tab="active" class="tab-panel" />
      </keep-alive>
    </div>
  </div>
</template>

<script setup>
import Recommend from '@/components/home/tab/Recommend.vue'
import Follow from '@/components/home/tab/Follow.vue'

import Notes from '@/components/home/tab/Notes.vue'

import { ref, markRaw, useTemplateRef } from 'vue'
const active = ref(1)
// const tabContentRef = useTemplateRef('tabContent');

// 定义组件映射
const components = [
  markRaw(Follow),
  markRaw(Recommend),
  markRaw(Notes),
  markRaw({ render: () => '减重食谱' }),
  markRaw({ render: () => '新鲜这样吃' }),
  markRaw({ render: () => '活动' }),
  markRaw({ render: () => '课堂' }),
]

const getComponentByIndex = (index) => {
  return components[index] || 'div'
}

// 提供给子组件使用的滚动容器引用
// const getScrollContainer = () => {
//   return tabContentRef.value;
// };

// 将方法暴露给子组件
// defineExpose({
//   getScrollContainer
// });
</script>

<style scoped lang="scss">
.tab-menu-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tab-header {
  flex-shrink: 0;
  padding: 1px 0;
}

.tab-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; // 添加这行以改善移动端滚动体验
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.tab-panel {
  height: 100%;
}
</style>
